<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <link rel="stylesheet" href="./css/element.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="js/element.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<div id="app">
    <div class="container">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item>
                <el-button @click="sendInfo">保存</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
            <el-form-item label="用户名">
                <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="昵称">
                <el-input v-model="form.nickName"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-radio v-model="form.sex" :label="1">男</el-radio>
                <el-radio v-model="form.sex" :label="0">女</el-radio>
            </el-form-item>
        </el-form>

       <el-table :data="userList" style="width: 100%; overflow-x: scroll">
           <el-table-column align="center" prop="id" width="80" label="序号">
               <template v-slot="scope">
                   <span>{{ scope.$index + 1 }}</span>
               </template>
           </el-table-column>
           <el-table-column align="center" prop="username" label="用户名"></el-table-column>
           <el-table-column align="center" prop="nickName" label="昵称"></el-table-column>
           <el-table-column align="center" prop="sex" label="性别">
                <!-- 插槽的scope对象 的row属性 包含了 一整条数据    -->
               <template v-slot="scope">
                   <el-tag type="success" v-if="scope.row.sex == 1">男</el-tag>
                   <el-tag v-else>女</el-tag>
               </template>
           </el-table-column>
           <el-table-column align="center" label="操作">
               <template v-slot="scope">
                   <el-button @click="getUserById(scope.row.id)">编辑</el-button>
                   <el-button @click="delUser(scope.row.id)">删除</el-button>
               </template>
           </el-table-column>
       </el-table>
    </div>

</div>
<script>
    new Vue({
        name: 'binHaiJava',
        el: "#app",
        data() {
            return {
                apiBaseUrl: 'http://localhost:8081/',
                userList: [], // 用户列表
                form: { // 一条用户数据的信息
                    id: null,
                    username: '',
                    password: '',
                    nickName: '',
                    sex: '1'
                }
            }
        },

        created() {
            // 需要初始化的数据，在这里调用函数并得到数据
            this.listUser()
        },

        methods: {
            async getUserById(id) {

                // 1.向后端服务请求数据
                let res = await axios.get(this.apiBaseUrl + 'user/' + id)
                console.log(res)
                // 2.将后端服务请求回来的数据赋值给页面绑定的属性
                let { data } = res // 解构赋值
                this.form = data
            },
            async sendInfo() {
                if (this.form.id > 0) {
                    // 走更新
                    await axios.put(this.apiBaseUrl +  'user', this.form)
                } else {
                    // 走新增
                    await axios.post(this.apiBaseUrl +  'user', this.form)
                }
                this.reset()
                this.listUser()

            },
            reset() {
                this.form = {
                    id: null,
                    username: '',
                    password: '',
                    nickName: '',
                    sex: 1
                }
            },
            // 需求: 查询用户列表数据，显示到页面上，页面上有编辑 删除按钮，新增 删除 都要更新列表
            async listUser() {
                let {data} = await axios.get(this.apiBaseUrl + 'user/list')
                this.userList = data
                console.log(data)
            },
            async delUser(id) {
                let res = await axios.delete(this.apiBaseUrl + 'user/' + id)
                this.listUser()
            }
        }
    });


</script>
</body>
</html>